<template>
<div class="role-management">
    <div class="ant-pro-table-search">
        <div class="wrapper">
        <!-- 查询表单 -->
            <div class="ant-pro-table-search">
                <a-form-model layout="inline">
                    <a-form-model-item label="设备:">
                        <a-select v-model="queryParam.deviceCode" style="width:180px;" >
                            <a-select-option v-for="item in deviceList" :key="item.deviceCode" >
                                {{item.equipmentName}}
                            </a-select-option>
                        </a-select> 
                    </a-form-model-item>
                    <a-form-model-item label="告警类型:">
                        <a-select v-model="queryParam.warningCode" style="width:180px;" >
                            <a-select-option v-for="item in warningCodeList" :key="item.warningCode" >
                                {{item.typeName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item >
                        <a-date-picker
                            v-model="queryParam.beginTime"
                            show-time
                            format="YYYY-MM-DD HH:mm:ss"/>
                    </a-form-model-item>
                    <a-form-model-item >
                        <a-date-picker
                            v-model="queryParam.endTime"
                            show-time
                            format="YYYY-MM-DD HH:mm:ss"
                            />
                    </a-form-model-item>
                    <a-form-model-item >
                        <a-button type="primary" @click="init()">查询</a-button>
                        <a-button type="primary" @click="reset()" style="margin-left:10px;">重置</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <!-- 表格区域 -->
            <a-card :bordered="false" :bodyStyle="{ padding: 0 }">
                <div class="ant-pro-table-wrapper">
                    <!--数据表格-->
                    <a-table
                        ref="table"
                        size="middle"
                        :rowKey="rowKey"
                        :columns="columns"
                        :dataSource="dataSource"
                        :pagination="pagination"
                        :loading="loading"
                        @change="handleTableChange"
                        :alert="{ show: true, clear: true }"
                    >
                        <!--是否启用-->
                        <template #isEnable-slot="text">
                            <span>{{ text | isEnableFilter }}</span>
                        </template>
                        <!--状态-->
                        <template #status-slot="text">
                            <span>{{ text | statusFilter }}</span>
                        </template>
                        <!--处理状态-->
                        <template #handleStatus-slot="text">
                            <span>{{ text | handleStatusFilter }}</span>
                        </template>
                        <!--是否告警-->
                        <template #warning-slot="text">
                            <span>{{ text | warningFilter }}</span>
                        </template>
                        <!---->
                    </a-table>
                </div>
            </a-card>
        </div>
    </div>
</div>
</template>
<script>
const isEnableMap = {
    0: {status: "0",text: "停用",},
    1: {status: "1",text: "启用",},
};
const statusMap = {
    1: {status: "1",text: "休眠",},
    2: {status: "2",text: "激活",},
    3: {status: "3",text: "离线",},
};
const warningMap ={
    0: {status: "1",text: "否",},
    1: {status: "2",text: "是",},
}
const handleStatusMap ={
    0: {status: "0",text: "已处理",},
    1: {status: "1",text: "已忽略",},
}
export default {
    data() {
        return {
            // 表头
            columns: [
                {
                    title: "序号",
                    dataIndex: "index",
                    align: "center",
                },
                {
                    title: "设备编号",
                    dataIndex: "equipmentCode",
                    align: "center",
                },
                {
                    title: "被监测设备名称",
                    dataIndex: "passiveMonitor",
                    align: "center",
                },
                {
                    title: "状态",
                    dataIndex: "status",
                    align: "center",
                    scopedSlots: { customRender: "status-slot" },
                },
                {
                    title: "是否启用",
                    dataIndex: "isEnable",
                    align: "center",
                    scopedSlots: { customRender: "isEnable-slot" },
                },
                {
                    title: "设备类型编码",
                    dataIndex: "equipmentClassify",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "地址",
                    dataIndex: "setupAddress",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "所属单位",
                    dataIndex: "orgNo",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "起始经度",
                    dataIndex: "setupLg",
                    align: "center",
                },
                {
                    title: "起始纬度",
                    dataIndex: "setupLt",
                    align: "center",
                },
                {
                    title: "监测指数id",
                    dataIndex: "standardId",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "采集值",
                    dataIndex: "harvesteValue",
                    align: "center",
                },
                {
                    title: "采集时间",
                    dataIndex: "harvesteDate",
                    align: "center",
                },
                {
                    title: "是否警告",
                    dataIndex: "isWarning",
                    align: "center",
                    scopedSlots: { customRender: "warning-slot" },
                },
                {
                    title: "处理状态",
                    dataIndex: "handleStatus",
                    align: "center",
                    scopedSlots: { customRender: "handleStatus-slot" },
                }
            ],
            deviceList:[],
            queryParam:{
                deviceCode:"",
                warningCode:"",
                beginTime:null,
                endTime:null
            },
            dataSource:[],
            rowKey:'id',
            loading:false,
            pagination: {// 分页器设置
                total: 0,
                current: 1,
                pageSize: 10,
                showSizeChanger: true,
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                }
            },
            warningCodeList:[],
            endOpen:false
        }
    },
    filters: {
        statusFilter(type) {
            return statusMap[type].text;
        },
        isEnableFilter(type) {
            return isEnableMap[type].text;
        },
        warningFilter(type){
            return warningMap[type].text;
        },
        handleStatusFilter(type){
            return handleStatusMap[type].text;
        },
    },
    created(){
        this.getTime();
        this.getPcode();
        this.getCode();
        this.search();
    },
    mounted(){
        
    },
    methods: {
        getTime(){
            // 当前时间
            this.queryParam.endTime = this.formatter(new Date(),'yyyy-MM-dd hh:mm:ss');
            this.queryParam.beginTime = this.formatter(new Date(new Date().getTime() -7*24*60*60*1000),'yyyy-MM-dd hh:mm:ss');
        },
        formatter (thistime, fmt) {
            let $this = thistime
            let o = {
                'M+': $this.getMonth() + 1,
                'd+': $this.getDate(),
                'h+': $this.getHours(),
                'm+': $this.getMinutes(),
                's+': $this.getSeconds(),
                'q+': Math.floor(($this.getMonth() + 3) / 3),
                'S': $this.getMilliseconds()
            }
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
            }
            for (var k in o) {
                if (new RegExp('(' + k + ')').test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
            }
            return fmt
        },
        search(){
            this.pagination.current = 1;
            this.init();
        },
        // 查询操作
        init(){
            const dataRecordVo = {
                pageNumber: this.pagination.current,
                pageSize: this.pagination.pageSize,
                beginTime:new Date(this.queryParam.beginTime), 
                endTime:new Date(this.queryParam.endTime), 
                deviceCode:this.queryParam.deviceCode,
                warningCode:this.queryParam.warningCode
            };
            this.$http('/rapid/dataRecord/getDataRecordPage',dataRecordVo).then(res =>{
                if(res.code === 200){
                    this.dataSource = res.result.records;
                    for(let i =0;i<res.result.records.length;i++){
                        this.dataSource[i].index = i+1
                    }
                    this.pagination.total = !isNaN(res.result.total) ? Number(res.result.total) : 0
                }
            })
        },
        getPcode(){
            const data ={
                warnType:{}
            }
            this.$http('/rapid/warningType/getWarningTypeList',data).then(res =>{
                if(res.code === 200){
                    this.warningCodeList = res.result;
                }
            })
        },
        getCode(){
            const data ={
                warnType:{}
            }
            this.$http('/rapid/equipmentInfo/getEquipmentInfoList',data).then(res =>{
                if(res.code === 200){
                    this.deviceList = res.result;
                }
            })
        },
        handleTableChange (pagination) {
            this.pagination = pagination;
            this.init()
         },
        reset(){
            this.queryParam.deviceCode="";
            this.queryParam.warningCode="";
            this.init()
        }
    }
};
</script>
<style lang="less" scoped>
.role-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}
</style>